<?php
include("../config/config.php");
include("include/function.php");
if (!Login_Status()) {
    header("Location:login.php");
    exit;
}
$redis=Redis_Link();
?>
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Video Encode Server</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">
        Video Encode System
    </a>
    <span class="badge badge-secondary">V<?php echo $version;?></span>&nbsp;
    <span class="badge badge-success">Open Source Project</span>&nbsp;
    <span class="badge badge-info">Build:20180312T1</span>
</nav>
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-2 col-md-3">
            <div class="list-group">
                <a id="dashboard" href="dashboard.php" target="main_page" class="list-group-item list-group-item-action active" onclick="Change_Tab('dashboard')">Dashboard</a>
                <a id="video_list" href="video_list.php" target="main_page" class="list-group-item list-group-item-action" onclick="Change_Tab('video_list')">Video_List</a>
                <a id="config" href="config.php" target="main_page" class="list-group-item list-group-item-action" onclick="Change_Tab('config')">Config</a>
                <a id="upload" href="upload.php" target="main_page" class="list-group-item list-group-item-action" onclick="Change_Tab('upload')">Upload file</a>
            </div>
            <div class="card-body">
                CPU:
                <div class="progress">
                    <div id="cpu-progress" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
                         aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0">Loading
                    </div>
                </div>
                Memory:
                <div class="progress">
                    <div id="mem-progress" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
                         aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0">Loading
                    </div>
                </div>
                Disk:(Free:<span id="disk-free">Loading</span><br>Total:<span id="disk-total">Loading</span>)
                <div class="progress">
                    <div id="disk-progress" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
                         aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0">Loading
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header">
                    Worker Status
                </div>
                <div class="card-body">
                    <span class="badge badge-success">&nbsp;&nbsp;</span>:Free&nbsp;&nbsp;
                    <span class="badge badge-danger">&nbsp;&nbsp;</span>:Busy&nbsp;&nbsp;
                    <span class="badge badge-secondary">&nbsp;&nbsp;</span>:Down<br>
                    <?php
                    for ($i=1;$i<=Get_Config('worker_thread');$i++){
                        ?>
                        <span id="worker_<?php echo $i;?>" class="badge badge-info"><?php echo $i;?>#</span>
                        <?php
                    }
                    ?>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6 col-md-6">
                    <div class="card">
                        <div class="card-header">
                            Encode Control
                        </div>
                        <div class="card-body">
                            <?php
                            $encode=$redis->get('Main_Start');
                            if ($encode <> "OK"){
                                echo '<button id="encode_control" type="button" class="btn btn-primary btn-lg" onclick="Encode()">start</button>';
                            }else{
                                echo '<button id="encode_control" type="button" class="btn btn-primary btn-lg" onclick="Encode()">stop</button>';
                            } ?>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-10 col-md-9">
            <iframe id="main_page" name="main_page" frameborder="0" width="100%" src="dashboard.php"></iframe>
        </div>
    </div>
</div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
    var now_tab='dashboard';
    set_frame();
    window.onresize = function () {
        var height = window.innerHeight - 65;
        document.getElementById('main_page').setAttribute('height', height + 'px');
    };

    function set_frame() {
        var height = window.innerHeight - 65;
        document.getElementById('main_page').setAttribute('height', height + 'px');
    }
    function Change_Tab(name) {
        document.getElementById(now_tab).setAttribute('class','list-group-item list-group-item-action');
        document.getElementById(name).setAttribute('class','list-group-item list-group-item-action active');
        now_tab=name;
    }
    function Update_System_Info() {
        var cpu_progress = document.getElementById('cpu-progress');
        var mem_progress = document.getElementById('mem-progress');
        var disk_progress = document.getElementById('disk-progress');
        var ajax = new XMLHttpRequest();
        ajax.open('GET', 'ajax/load.php', true);
        ajax.send();
        ajax.onreadystatechange = function () {
            if (ajax.readyState == 4 && ajax.status == 200) {
                var result = JSON.parse(ajax.responseText);
                cpu_progress.innerHTML = result['data']['cpu'] + '%';
                cpu_progress.style.width = result['data']['cpu'] + '%';
                cpu_progress.setAttribute('aria-valuenow', result['data']['cpu']);
                mem_progress.innerHTML = result['data']['mem'] + '%';
                mem_progress.style.width = result['data']['mem'] + '%';
                mem_progress.setAttribute('aria-valuenow', result['data']['mem']);
                disk_progress.innerHTML = result['data']['disk_per'] + '%';
                disk_progress.style.width = result['data']['disk_per'] + '%';
                disk_progress.setAttribute('aria-valuenow', result['data']['disk_per']);
                document.getElementById('disk-free').innerHTML = result['data']['disk_free'] + 'GB';
                document.getElementById('disk-total').innerHTML = result['data']['disk_total'] + 'GB';
                for (var i=1;i<=<?php echo Get_Config('worker_thread');?>;i++){
                    if (result['data']['worker'][i]==1){
                        document.getElementById('worker_'+i).setAttribute('class','badge badge-success');
                    }
                    if (result['data']['worker'][i]==2){
                        document.getElementById('worker_'+i).setAttribute('class','badge badge-danger');
                    }
                    if (result['data']['worker'][i]==3){
                        document.getElementById('worker_'+i).setAttribute('class','badge badge-secondary');
                    }
                }
            }
        }
    }
    function Encode() {
        var ajax=new XMLHttpRequest();
        var action=document.getElementById('encode_control').innerHTML;
        var nextaction="start";
        if (action == "start"){
            nextaction="stop";
        }

        ajax.open('GET','ajax/encode.php?action='+action,true);
        ajax.send();
        ajax.onreadystatechange = function () {
            if (ajax.readyState == 4 && ajax.status == 200) {
                var result = JSON.parse(ajax.responseText);
                if (result['code']==201){
                    //document.getElementById('start_encode').disabled=true;
                    document.getElementById('encode_control').innerHTML=nextaction;
                }
            }
        }
    }
    setInterval(Update_System_Info, 5000);
    window.onload = Update_System_Info;
</script>
</html>